<template>
  <div>
    <!-- 设计区域开始 -->
    <a-card
      v-if="
        form.zeroCodeMenuType == eipZeroCodeMenuType.worksheet &&
        form.openType == eipMenuOpenType.spa
      "
      :loading="loading"
      :headStyle="{ borderBottom: '0', paddingRight: '13px' }"
      :bodyStyle="{ padding: 0 }"
      :bordered="false"
      size="small"
    >
      <div v-if="mode == 1">
        <div class="build-setting">
          <a-icon :type="form.icon" />
          <span class="margin-left">{{ form.name }}</span>

          <a-space class="margin-left">
            <a-tooltip
              v-if="form.zeroCodeMenuType == eipZeroCodeMenuType.worksheet"
              title="表单"
            >
              <a-button type="primary" @click="designerForm" size="small">
                <a-icon type="form" />表单设计</a-button
              >
            </a-tooltip>
            <a-tooltip
              v-if="form.zeroCodeMenuType == eipZeroCodeMenuType.worksheet"
              title="功能开关"
            >
              <a-button
                type="primary"
                @click="settingDesigner('3')"
                size="small"
              >
                <a-icon type="block" />功能开关</a-button
              >
            </a-tooltip>
            <a-tooltip
              v-if="form.zeroCodeMenuType == eipZeroCodeMenuType.worksheet"
              title="业务规则"
            >
              <a-button
                type="primary"
                @click="settingDesigner('4')"
                size="small"
              >
                <a-icon type="read" />业务规则</a-button
              >
            </a-tooltip>
            <a-tooltip
              v-if="form.zeroCodeMenuType == eipZeroCodeMenuType.worksheet"
              title="业务验证"
            >
              <a-button
                type="primary"
                @click="settingDesigner('7')"
                size="small"
              >
                <a-icon type="lock" />业务验证</a-button
              >
            </a-tooltip>

            <a-tooltip
              v-if="form.zeroCodeMenuType == eipZeroCodeMenuType.worksheet"
              title="自定义按钮"
            >
              <a-button
                type="primary"
                @click="settingDesigner('5')"
                size="small"
              >
                <a-icon type="profile" />自定义按钮</a-button
              >
            </a-tooltip>
            <a-tooltip
              v-if="form.zeroCodeMenuType == eipZeroCodeMenuType.worksheet"
              title="打印模板"
            >
              <a-button
                type="primary"
                @click="settingDesigner('6')"
                size="small"
              >
                <a-icon type="printer" />打印模板</a-button
              >
            </a-tooltip>

            <!-- <a-tooltip
              v-if="form.zeroCodeMenuType == eipZeroCodeMenuType.worksheet"
              title="自动化"
            >
              <a-button type="primary" @click="automation" size="small">
                <a-icon type="fork" />自动化</a-button
              >
            </a-tooltip> -->
          </a-space>
        </div>

        <!-- 表单设计器 -->
        <designer-form
          ref="designerForm"
          v-if="designer.form.visible"
          :visible.sync="designer.form.visible"
          :title="designer.form.title"
          :zeroCodeId="designer.form.zeroCodeId"
          :menuId="form.menuId"
          :tabkey="tabkey"
          :settingkey="settingkey"
          @close="designerFormClose"
          @designerPublic="designerPublic"
        ></designer-form>

        <!-- 视图新增 -->
        <view-add
          v-if="setting.view.visible"
          :visible.sync="setting.view.visible"
          :zeroCodeId="setting.view.zeroCodeId"
          :title="setting.view.title"
          :type="setting.view.type"
          :menuId="form.menuId"
          @save="viewSave"
        >
        </view-add>

        <!-- 视图新增 -->
        <designer-view-grid
          v-if="designer.view.grid.visible"
          :visible.sync="designer.view.grid.visible"
          :zeroCodeId="designer.view.grid.zeroCodeId"
          :title="designer.view.grid.title"
          @public="gridPublic"
        >
        </designer-view-grid>
      </div>
      <!-- 设计区域结束 -->

      <!-- 视图标签（设计界面显示，或者非设计界面不为1） -->
      <div
        class="eip-zerocode"
        v-if="mode == 1 || (mode == 0 && list.datas.length > 1)"
      >
        <div class="eip-zerocode-height">
          <div class="flex justify-start align-center">
            <a-space>
              <div
                class="eip-zerocode-item"
                @click="viewChange(vitem)"
                v-for="vitem in list.datas"
                :key="vitem.zeroCodeId"
              >
                <div
                  :class="{
                    'eip-zerocode-item-active':
                      vitem.zeroCodeId == list.zeroCodeId,
                  }"
                  class="eip-zerocode-item-main"
                  :style="{
                    fontSize: '12px',
                    padding: mode == 1 ? '0 20px 0 4px' : '0 10px 0 4px',
                  }"
                >
                  <a-icon :type="vitem.icon" class="icon"></a-icon
                  ><span>{{ vitem.name }}</span>
                  <a-dropdown
                    v-if="mode == 1"
                    class="eip-zerocode-item-dropdown"
                  >
                    <a-icon type="caret-down" style="color: #999"></a-icon>
                    <a-menu slot="overlay">
                      <a-menu-item @click="designerViewGridClick(vitem)"
                        ><a-icon type="edit"></a-icon> 配置视图
                      </a-menu-item>
                      <a-sub-menu>
                        <template slot="title">
                          <a-icon type="swap"></a-icon> 更改类型
                        </template>

                        <a-menu-item
                          @click="viewClick(vtitem)"
                          v-for="vtitem in eipZeroCodeViewType"
                          :key="vtitem.type"
                          ><a-icon :type="vtitem.icon" />{{
                            vtitem.name
                          }}</a-menu-item
                        >
                      </a-sub-menu>
                      <a-menu-item>
                        <a-icon type="copy"></a-icon>复制
                      </a-menu-item>
                      <a-menu-divider />
                      <a-menu-item
                        ><a-icon type="share-alt"></a-icon> 分享
                      </a-menu-item>
                      <a-sub-menu>
                        <template slot="title">
                          <a-icon type="export"></a-icon> 导出
                        </template>
                        <a-menu-item
                          ><a-icon type="file-excel" />excel</a-menu-item
                        >
                        <a-menu-item
                          ><a-icon type="file"></a-icon>附件</a-menu-item
                        >
                      </a-sub-menu>
                      <a-sub-menu>
                        <template slot="title">
                          <a-icon type="eye-invisible"></a-icon>
                          导航栏隐藏
                        </template>
                        <a-menu-item
                          ><a-icon type="file"></a-icon>全隐藏</a-menu-item
                        >
                        <a-menu-item
                          ><a-icon type="desktop" />仅在PC端隐藏</a-menu-item
                        >
                        <a-menu-item
                          ><a-icon type="mobile"></a-icon
                          >仅在移动端隐藏</a-menu-item
                        >
                      </a-sub-menu>
                      <a-menu-item @click="designerViewDelete(vitem)">
                        <div style="color: red">
                          <a-icon type="delete"></a-icon> 删除
                        </div>
                      </a-menu-item>
                    </a-menu>
                  </a-dropdown>
                </div>
              </div>
            </a-space>
            <div class="eip-zerocode-item-divider" v-if="mode == 1"></div>

            <a-dropdown
              class="eip-zerocode-item-main create-view"
              v-if="mode == 1"
            >
              <div><a-icon type="table" class="icon"></a-icon>创建视图</div>
              <a-menu slot="overlay">
                <a-menu-item
                  @click="viewClick(vtitem)"
                  v-for="vtitem in eipZeroCodeViewType"
                  :key="vtitem.type"
                  ><a-icon :type="vtitem.icon" />{{ vtitem.name }}</a-menu-item
                >
              </a-menu>
            </a-dropdown>
          </div>
        </div>
      </div>

      <run-list
        v-if="
          form.zeroCodeMenuType == eipZeroCodeMenuType.worksheet &&
          form.openType == eipMenuOpenType.spa &&
          list.datas.length > 0
        "
        ref="runList"
        :name="form.name"
        :zeroCodeId="list.zeroCodeId"
        :menuId="form.menuId"
        :mode="mode"
        :mode-length="list.datas.length"
      ></run-list>
    </a-card>
  </div>
</template>
<script>
import { findByMenuId } from "@/services/system/zerocode/app/designer";
import { findById } from "@/services/system/menu/edit";
import { del } from "@/services/system/zerocode/app/build";
import runList from "@/pages/system/zerocode/run/list";
import runIframe from "@/pages/system/zerocode/run/iframe";
import runPortal from "@/pages/system/zerocode/run/portal";

import designerForm from "@/pages/system/zerocode/worksheet/designer";
import designerPortal from "@/pages/system/zerocode/portal/designer";
import designerViewGrid from "@/pages/system/zerocode/view/grid/designer";

import viewAdd from "@/pages/system/zerocode/app/components/view";

import { mapGetters } from "vuex";
import { deleteConfirm } from "@/utils/util";
export default {
  components: {
    runIframe,
    runList,
    runPortal,
    designerForm,
    designerPortal,
    designerViewGrid,
    viewAdd,
  },
  name: "build",
  computed: {
    ...mapGetters("account", ["zeroCode"]),
  },
  data() {
    return {
      tabkey: "1",
      settingkey: "1",

      loading: true,
      zeroCodeId: "",

      //设计视图
      designer: {
        view: {
          grid: {
            visible: false,
            title: "",
            zeroCodeId: undefined,
          },
        },

        form: {
          visible: false,
          title: "",
          zeroCodeId: "",
        },
      },

      setting: {
        view: {
          visible: false,
          title: "",
          zeroCodeId: undefined,
          menuId: undefined,
          type: "table",
        },

        menu: [],
      },

      form: {
        menuId: null,
        name: null,
        icon: null,
        openType: null,
        iframePath: null,
        zeroCodeMenuType: null,
      },

      list: {
        visible: false,
        zeroCodeId: null,
        datas: [],
      },
    };
  },
  props: {
    //模式:0操作，1设计
    mode: {
      type: Number,
      default: 0,
    },
  },
  created() {
    this.init();
  },
  methods: {
    /**
     * 初始化
     */
    init() {
      const route = this.$route;
      if (this.mode == 0) {
        let that = this;
        that.$loading.show({ text: "加载中,请稍等...", background: "none" });
        let menuId = route.meta.menuId;
        findById(menuId).then(function (result) {
          that.reloadSetting(result.data);
        });
      } else {
        this.hideLoading();
      }
    },

    /**
     * 视图保存
     */
    viewSave(zeroCodeId) {
      this.list.zeroCodeId = zeroCodeId;
      this.initViewList();
    },

    /**
     *视图点击
     */
    viewClick(vtitem) {
      this.setting.view.type = vtitem.type;
      this.setting.view.visible = true;
      this.setting.view.title = vtitem.name;
    },

    /**
     * 视图改变
     */
    viewChange(vitem) {
      this.list.zeroCodeId = vitem.zeroCodeId;
    },

    /**
     * 列表发布成功
     */
    gridPublic() {
      this.$refs.runList.initGrid();
      this.$refs.runList.reloadData();
    },

    /**
     * 视图表格
     */
    designerViewGridClick(item) {
      this.designer.view.grid.title = item.name;
      this.designer.view.grid.zeroCodeId = item.zeroCodeId;
      this.designer.view.grid.visible = true;
    },

    /**
     * 删除视图
     * @param item
     */
    designerViewDelete(item) {
      let that = this;
      deleteConfirm(
        "视图【" + item.name + "】" + that.eipMsg.delete,
        function () {
          that.$loading.show({ text: that.eipMsg.delloading });
          del({ id: item.zeroCodeId }).then((result) => {
            that.$loading.hide();
            if (result.code == that.eipResultCode.success) {
              that.designerPublic();
              that.$message.success(result.msg);
            } else {
              that.$message.error(result.msg);
            }
          });
        },
        that
      );
    },

    /**
     *
     */
    designerPublic() {
      this.list.zeroCodeId = null;
      this.initViewList();
    },

    /**
     *
     */
    designerFormClose() {
      this.designer.form.visible = false;
    },

    /**
     * 编辑
     */
    designerForm() {
      this.tabkey = "1";
      this.settingkey = "1";
      this.initFormZeroCode();
    },

    /**
     * 初始化视图
     */
    initViewList() {
      let that = this;
      /**
       * 获取列表配置项
       */
      findByMenuId({
        menuId: that.form.menuId,
        type: that.eipZeroCodeMenuType.view,
      }).then(function (result) {
        that.hideLoading();
        if (result.code === that.eipResultCode.success) {
          that.list.datas = result.data;
          if (that.list.zeroCodeId == null) {
            that.list.zeroCodeId = result.data[0].zeroCodeId;
          }
          that.$forceUpdate();
        } else {
          that.$message.error(result.msg);
        }
      });
    },

    /**
     * 初始化工作表
     */
    initWorksheet() {
      let that = this;
      /**
       * 获取表单配置
       */
      findByMenuId({
        menuId: that.form.menuId,
        type: that.eipZeroCodeMenuType.worksheet,
      }).then(function (result) {
        that.hideLoading();
        if (result.code === that.eipResultCode.success) {
          that.zeroCodeId = result.data[0].zeroCodeId;
          that.$forceUpdate();
        } else {
          that.$message.error(result.msg);
        }
      });
    },

    /**
     * 重载配置
     */
    reloadSetting(menu) {
      let that = this;
      this.setting.menu = menu;
      this.list.zeroCodeId = null;
      this.form = {
        menuId: menu.menuId,
        name: menu.name,
        icon: menu.icon,
        openType: menu.openType,
        iframePath: menu.iframePath,
        zeroCodeMenuType: menu.zeroCodeMenuType,
      };
      //工作表
      if (menu.zeroCodeMenuType == this.eipZeroCodeMenuType.worksheet) {
        that.initViewList();
        that.initWorksheet();
      }

      //iframe
      else if (menu.zeroCodeMenuType == this.eipZeroCodeMenuType.iframe) {
        that.hideLoading();
      }
      //工作台
      else if (menu.zeroCodeMenuType == this.eipZeroCodeMenuType.portal) {
        findByMenuId({ menuId: this.form.menuId, configType: 4 }).then(
          function (result) {
            that.hideLoading();
            if (result.code === that.eipResultCode.success) {
              that.setting.view.portal.zeroCodeId = result.data[0].zeroCodeId;
              that.setting.view.portal.key = Date.now();
            } else {
              that.$message.error(result.msg);
            }
          }
        );
      } else {
        that.hideLoading();
      }
    },

    /**
     * 关闭等待效果
     */
    hideLoading() {
      this.loading = false;
      this.$message.destroy();
      this.$loading.hide();
    },

    /**
     * 自定义按钮
     */
    settingDesigner(settingkey) {
      this.tabkey = "2";
      this.settingkey = settingkey;
      this.initFormZeroCode();
    },

    /**
     * 初始化表单
     */
    initFormZeroCode() {
      let that = this;
      that.$loading.show({ text: "加载中,请稍等..." });
      findByMenuId({ menuId: this.form.menuId, type: 2 }).then(function (
        result
      ) {
        that.$loading.hide();
        if (result.code === that.eipResultCode.success) {
          that.designer.form.zeroCodeId = result.data[0].zeroCodeId;
          that.designer.form.title = result.data[0].name;
          that.designer.form.visible = true;
        } else {
          that.$message.error(result.msg);
        }
      });
    },

    /**
     *自动化
     */
    automation() {
      let that = this;
      that.$loading.show({ text: "加载中,请稍等..." });
      findByMenuId({ menuId: this.form.menuId, configType: 2 }).then(function (
        result
      ) {
        that.$loading.hide();
        if (result.code === that.eipResultCode.success) {
          that.setting.view.automation.tableId = result.data[0].zeroCodeId;
          that.setting.view.automation.title = result.data[0].name;
          that.setting.view.automation.visible = true;
        } else {
          that.$message.error(result.msg);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.ant-dropdown-menu {
  width: 150px;
}

.build-setting {
  font-size: 17px;
  color: #333;
  font-weight: 700;
  height: 48px;
  line-height: 48px;
  padding-left: 10px;
  border-bottom: 1px solid #f0f0f0;
}
</style>
